<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>首页 - url2sql</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css">
<!-- Le styles -->
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
.tools{
  display: none;
  height: 15px;
}
.tools i:hover {
  background-color: rgba(255, 0, 0, .25);
}
.page-header h1 .tools{
  float: right;
}
</style>
<link rel="stylesheet" href="./css/bootstrap-responsive.min.css"
  type="text/css">
  
<script type="text/javascript" src="./js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="./js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>

<body>

<script include='header.html'></script>

  <div class="container-fluid">
     <div id="main">
  	</div>
    <script type="text/tmpl" id="tmpl">
	    <div class="page-header" id="table_${id}">
	      <h1>
	        ${name}<small></small>
			{{if status==1}}
		        <span class="badge badge-success">启用</span>
			{{else}}
		        <span class="badge badge-warning">禁用</span>
			{{/if}}
	        <span class="tools" sign="table" _id="${id}">
	          <i class="icon-pencil" title="修改"></i>
	          <i class="icon-plus" title="增加"></i>
	          <i class="icon-remove" title="删除"></i>
	          <i class="icon-plus-sign" title="增加路径"></i>
	        </span>
	      </h1>
	      <table class="table table-bordered table-striped">
	        <tr>
	          <th>路径</th>
	          <th>数据校验</th>
	          <th>Sql</th>
	          <th>拦截JS</th>
	          <th style="width: 70px;">状态</th>
	          <th style="width: 70px;">操作</th>
	        </tr>
	      </table>
	    </div>
	</script>
	
	<script type="text/tmpl" id="url2sql-tmpl">
	   <tr>
	    <td>${path}</td>
	    <td>${v}</td>
	    <td>${sql}</td>
	    <td>${js}</td>
	    <td>
			{{if status==1}}
		        <span class="badge badge-success">启用</span>
			{{else}}
		        <span class="badge badge-warning">禁用</span>
			{{/if}}
		</td>
	    <td>
	      <span class="tools" sign="url2sql" _id="${id}">
	        <i class="icon-pencil" title="修改"></i>
	        <i class="icon-remove" title="删除"></i>
	      </span>
	    </td>
	  </tr>
	</script>
    <hr>
    <footer>
      <p>Say:后端是前端的Mysql.<a class="btn" style="float: right;" id="addTableButton">增加</a></p></p>
    </footer>
  </div>
  
  
  <div class="modal hide" id="deleteDialg">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3 sign="title">确定删除</h3>
    </div>
    <div class="modal-body">
      <p sign="content">确定删除吗？</p>
    </div>
    <div class="modal-footer">
      <a class="btn" data-dismiss="modal">关闭</a>
      <a sign="ok" class="btn btn-primary">确定</a>
    </div>
  </div><!-- 删除对话框完毕 -->
  
  
  <div class="modal hide" id="editDialg">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3 sign="title">修改</h3>
    </div>
    <div class="modal-body">
      <div>
          <input sign="path" class="input-xlarge" name="" style="width:70%" placeholder="路径" title="路径"/>   
          <span sign="status" class="badge badge-success" style="float: right;">启用</span>
      </div>
      <div>
          <input sign="v" class="input-xlarge" name="" style="width:100%" placeholder="数据验验" title="数据验验"/>   
      </div>
      <div>
          <textarea sign="sql" class="input-xlarge" name="" style="width:100%;height: 50px;" placeholder="Sql" title="Sql"></textarea>   
      </div>
      <div>
          <textarea sign="js" class="input-xlarge" name="" style="width:100%;height: 50px;" placeholder="拦截JS" title="拦截JS"></textarea>   
      </div>
    </div>
    <div class="modal-footer">
      <a data-dismiss="modal" class="btn">关闭</a>
      <a sign="ok" class="btn btn-primary">确定</a>
    </div>
  </div><!-- editDialg结束 -->
  
    <div class="modal hide" id="editTableDialg">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3 sign="title">修改</h3>
    </div>
    <div class="modal-body">
      <div>
          <input sign="name" class="input-xlarge" name="" style="width:70%" placeholder="表名" title="主要用来操作的表名"/>   
          <span sign="status" class="badge badge-success" style="float: right;">启用</span>
      </div>
    </div>
    <div class="modal-footer">
      <a data-dismiss="modal" class="btn">关闭</a>
      <a sign="ok" class="btn btn-primary">确定</a>
    </div>
  </div><!-- editTableDialg结束 -->
  
  
  <!--/.fluid-container-->
  <script type="text/javascript">
  	
  </script>
  <script type="text/javascript" src="./js/url2sql.js"></script>
  
  <script type="text/javascript">
  var callback = null;
  (function(window){
	var table={}, url2sql={};
  	callback = function(json){
  		table = json.data;
  		$('#tmpl').tmpl(json.data).appendTo($('#main'));
  		$.getJSON('/root/all.json', function(json){
  			url2sql = json.data;
  			var tmpl = $('#url2sql-tmpl');
  			for(var i in json.data){
  				var t = json.data[i];
  				var table = $('#table_' + t.tableId + ' table');
  				tmpl.tmpl(t).appendTo(table);
  			}
  		});
  	}
  	
  	//事件
  	$(function(){
  		var json2UrlString = function(json){
  		    var strTemp = "";
  		    for (var key in json) {
  		        strTemp += key + '=' + json[key] + '&';
  		    }
  		    return strTemp.slice(0, -1);
  		};
  		
  		var getById = function(id, arrays){
  			for(var i in arrays){
  				var t = arrays[i];
  				if(t.id == id){
  					return t;
  				}
  			}
  		};
  		
  		var handle = function($this, tableCallback, url2sqlCallback){
  			var $parent = $this.parent();
  			var id = $parent.attr('_id');
  			var sign = $parent.attr('sign');
  			if(sign == 'table'){
	  			var data = getById(id, table);
  				tableCallback(data);
  			}else{
	  			var data = getById(id, url2sql);
  				url2sqlCallback(data);
  			}
  		}
  		
  		//删除OK
  		$('.tools .icon-remove').live('click', function(){
  			var $this = $(this);
  			var msg = {};
  			handle($this, function(data){
  				//删除表格
  				msg.title = "表名:" + data.name;
  				msg.content = "确定要删除该表及其结构吗？"
  				msg.url = "/root/deleteTable.json?id=" + data.id;
  				msg.parent = $this.parents('.page-header');
  			},function(data){
  				//url2sql
  				msg.title = "删除Url:" + data.path;
  				msg.content = "确定要删除该URL及其对应的SQL吗"
  				msg.url = "/root/deletePath.json?id=" + data.id;
  				msg.parent = $this.parents('tr');
  			});
  			//显示对话框
  			Dialg.del(function(){
  				$.getJSON(msg.url, function(json){
  					if(json.code==0){
	  					msg.parent.remove();
  					}else{
  						alert('操作失败');
  					}
  				});
  			}, msg.content, msg.title);
  		});
  		
  		var url2sqlEdit = function(){
  			var temp;
  			var tableId;
  			var isAdd = true;
  			handle($(this), function(data){
  				tableId = data.id;
  			}, function(data){
  				temp = data;
  				tableId = data.tableId;
  				isAdd = false;
  			});
  			Dialg.edit(function(json){
  				var url = "/root/"
				json.tableId = tableId;
  				if(isAdd){
  					url += "addPath.json";
  				}else{
  					json.id = temp.id;
  					url += "updatePath.json";
  				}
	  			var str = json2UrlString(json);
	  			var retVal = false;
	  			console.log(json);
	  			//$.post(url, json)
  				$.ajax({
  					'async' : false,
  					'type' : "post",
  					'url' : url,
  					'data' : json,
  					'dataType' : 'json',
  					'success' : function(json){
  						retVal = true;
  						console.log(json);
  					}
  				});
  				if(!retVal){
  					alert('保存失败');
  				}else{
  					window.location.reload();
  				}
  				return retVal;
  			}, temp);
  		};
  		$('.tools .icon-plus-sign').live('click', url2sqlEdit);
  		$('table .icon-pencil').live('click', url2sqlEdit);
  		
  		
  		var editTable = function(callback, json){
			var d = $('#editTableDialg')
			
			if(json){
				d.find('[sign="title"]').html('修改');
			}else{
				d.find('[sign="title"]').html('增加');
  				json = {name:'', status:1};
			}
  			
			d.find('[sign="name"]').val(json.name);
			
			var status = d.find('[sign="status"]').html('禁用');
			if(!json.status){
				status.html('启用');
			}
			status.trigger('click');
  			
  			var ok = d.find('[sign="ok"]');
			var e = function(){
				var result = true;
				if(callback){
					var data = {};
					data.status = 0;
					if(d.find('[sign="status"]').html() == '启用'){
						data.status = 1;
					}
					data.name = d.find('[sign="name"]').val();
					result = callback(data, json);
				}
				if(result !== false){
					ok.unbind();
					d.modal('hide');
				};
			};
			ok.click(e);
  			
  			d.modal({
				backdrop:true,
				keyboard:true,
				show:true
			});
  		}
  		$('h1 .tools .icon-pencil').live('click', function(){
  			var $parent = $(this).parent();
  			var id = $parent.attr('_id');
  			editTable(function(json){
  				json.id = id;
  				var url = '/root/updateTable.json';
  				var retVal = false;
  				$.ajax({
  					'async' : false,
  					'type' : "post",
  					'url' : url,
  					'data' : json,
  					'dataType' : 'json',
  					'success' : function(json){
  						retVal = true;
  						console.log(json);
  					}
  				});
  				if(!retVal){
  					alert('保存失败');
  				}else{
  					window.location.reload();
  				}
  				return retVal;
  				
  			},getById(id, table));
  		});
  		var addTable = function(){
  			editTable(function(json){
  				var url = '/root/addTable.json';
  				var retVal = false;
  				$.ajax({
  					'async' : false,
  					'type' : "post",
  					'url' : url,
  					'data' : json,
  					'dataType' : 'json',
  					'success' : function(json){
  						retVal = true;
  						console.log(json);
  					}
  				});
  				if(!retVal){
  					alert('保存失败');
  				}else{
  					window.location.reload();
  				}
  				return retVal;
  			});
  		};
  		$('h1 .tools .icon-plus').live('click', addTable);
  		$('#addTableButton').click(addTable);
  	}); //事件结束 
  })(window);
  </script>
</body>
</html>
